<template>
  <div>
    <div class="div-style">
      <el-input
        placeholder="请输入姓名"
        v-model="cform.name"
        class="input-style"
        clearable
      >
      </el-input>
    </div>
    <div class="div-style">
      <el-input
        placeholder="请输入身份证号"
        v-model="cform.cardId"
        class="input-style"
        clearable
      >
      </el-input>
    </div>
    <div class="div-style">
      <el-input
        placeholder="请输入手机号"
        v-model="cform.phone"
        class="input-style"
        clearable
      >
      </el-input>
    </div>
    <div class="div-style">
      <el-checkbox v-model="checked">是否来自中高风险地区</el-checkbox>
    </div>
    <div v-show="!checked" class="div-style">
      <span class="demonstration">入住时间-退房时间 </span>
      <el-date-picker
        v-model="cform.date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <div class="div-style">
      <el-button type="success" @click="buttons">入住</el-button>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>二维码</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="tijioa">确 定（付款成功）</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  naem: "zhufang",
  data() {
    return {
      checked: false,
      dialogVisible: false,
      cform: {
        id: "",
      },
      id: "",
      input1: "",
      input2: "",
      input3: "",
      value1: [new Date(2021, 10, 10, 10, 10), new Date(2021, 10, 11, 10, 10)],
    };
  },
  props: ["id"],
  mounted() {
    this.id = this.$route.query.id;
  },
  methods: {
    buttons() {
      this.dialogVisible = true;
    },
    async  tijioa() {
      // if (this.checked) {
      //   //发送疫情入住
      //   // this.yiqing();
      //   let result = this.$API.myapi.reqTableYiqingruzhu(this.cform);
      //   if (result.data.code == 20000) {
      //     this.$message({
      //       showClose: true,
      //       message: "恭喜你 购买成功(隔离十四天)！",
      //       type: "success",
      //     });
      //   }
      //   // return;
      // }
      this.dialogVisible = false;
      this.cform.id = this.id;

      let result = await this.$API.myapi.reqTableYiqingruzhu(this.cform,this.checked);
      console.log(result);

      if (result.data.code == 20000) {
        this.$message({
          showClose: true,
          message: "恭喜你 购买成功！",
          type: "success",
        });
      }
    },
    async yiqing() {},
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.div-style {
  margin-top: 20px;
}
.input-style {
  width: 500px;
}
</style>